@charset "utf-8";
/* id选择器 */
#app{	
	/*定位实现元素水平垂直居中显示*/
	position:absolute;
	left: 50%;
	top:50%;
	/* margin-top:-350px;
	margin-left:-225px; */
	margin:-350px 0 0 -225px;
	width:450px;
	height:700px;
	/* 盒子阴影 */
	box-shadow:10px 10px 20px rgba(0,0,0,0.2);
} 

/* 类选择器 */

.header{
	display: flex;
	top:0;
	left:0;
	right:0;
	height:48px;
	background-color:rgb(30, 206, 155); /*背景颜色色*/
	
}

.name{
	flex:5;
	text-align:center;	/*文本居中显示*/
	line-height:48px ;	/*行高*/
	font-size: 1.2em;	/*字体大小 1em=16px*/
	color:rgb(255, 255, 255); /*文本颜色*/
	letter-spacing: 2px; /*字符间距*/
}
.kongzhi-btn{
	flex:1;
	max-width: 48px;
	background:url('../img/suijibofang.png') no-repeat;
	/*设置鼠标指针样式*/
	cursor:pointer;
}

.footer{
	position:absolute;
	left:0;
	right:0;
	bottom:0; /*当前元素紧邻底部*/
	height:80px;
	background-color: rgb(30, 206, 155);
}

.body{
	position:absolute;
	top:48px;
	bottom:80px;
	left:0;
	right:0;
	background-color: rgba(0,0,0,0.1);
	/*设置y轴的内容超出显示区域时出现滚动条*/
	overflow-y: scroll;
}

.item{
	/*使用弹性布局*/
	display: flex;
	height:50px;
	line-height: 50px;
	border-bottom:1px solid rgba(255,255,255,0.5);
	cursor:pointer;/*设置鼠标指针样式:手指*/
	transition: all .8s; /*动画过渡效果*/
}

/* 伪类选择器+类选择 ：组合选择器 */
.item:hover,
.isPlaying{
	background-color: rgb(255, 220, 0);
	color:rgb(30, 206, 155);
}

/*伪对象选择器*/
::-webkit-scrollbar{
	width: 5px;
	background: rgba(0,0,0,0.1);
	border-radius:3px;
}
/*设置滑块样式*/
::-webkit-scrollbar-thumb{
	width:5px;
	background:rgb(30, 206, 155) ;
	border-radius:3px;
}


.item-name{
	/*设置弹性比例*/
	flex:5;
	/*设置内边距*/
	padding:0 10px;
	/*当内容超出元素的宽度时使用...*/
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-size{
	flex:1;
}
.progress{
	height:32px;
	width:100%;
}	

.progress-bar{
	height: 2px;
	width: 0;
	background-color: rgb(255,255,0);/* #ff0*/
	box-shadow:0 0 10px rgb(255,255,0);
}

.time{
	padding:5px;
	width: 100%;
	height: 20px;
	box-sizing: border-box;
}
/* 子选择器 */
.time > div{
	/* 左浮动 */
	float:left;
	width:50%;
	font-size: .8em;
	color:#eee;
}

.time-total{
	text-align: right;
}

.music-control{
	display: flex;
	padding:0 5px;
	height:48px;
	line-height: 48px;
	width: 100%;
	box-sizing: border-box;
}

.music-name{
	flex:5;
	font-size:1.2em;
	color:#eee;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.music-btn{
	flex:1;
	max-width: 48px;
	background:url('../img/play.png') no-repeat;
	/*设置鼠标指针样式*/
	cursor:pointer;
}